<!DOCTYPE html>
<html>

<head>
    <title locale="displaytest/display-test-title">ArozOS Display Test</title>
    <script src="../../../script/jquery.min.js"></script>
    <script type="text/javascript" src="../../script/applocale.js"></script>
    <style>
        body {
            background-color: #f9f9f9;
        }

        .fs {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="fs" onClick="nextColor(this);" style="display:none;"></div>
    <div id="startui" class="ui container">
        <div class="ui basic segment">
            <div class="ui header">
                <span locale="displaytest/display-testing-title">Display Testing</span>
                <div class="sub header" locale="displaytest/display-testing-subheader">Simple display testing tools</div>
            </div>
        </div>

        <h4 locale="displaytest/dead-pixel-test-title">Dead Pixel Test</h4>
        <p locale="displaytest/dead-pixel-test-description">This test will popup a new window with full-screen functionality. <br>
            To exit the test, press ESC on the keyboard or swipe down & press the "close" button on touch screen devices.</p>
        <button class="ui blue button" onClick='startTest();'><i class="external icon"></i> <span locale="displaytest/start-test-button">Start Test</span></button>
    </div>
    <script>

        var displayTestLocale = NewAppLocale();
        displayTestLocale.init("../locale/system_settings/display.json", function(){
            displayTestLocale.translate();
        });

        function startTest() {
            window.open("/SystemAO/info/display.html#test");
        }

        if (window.location.hash == "#test") {
            var colorList = ["black", "red", "blue", "green", "yellow", "purple", "white"];
            var code = 0;
            $(".fs").show();
            $("#startui").hide();

            function nextColor(object) {
                requestFullScreen(object);
                code = code + 1;
                if (code > colorList.length - 1) {
                    code = 0;
                }
                $(".fs").css("background-color", colorList[code]);
            }

            function requestFullScreen(element) {
                // Supports most browsers and their versions.
                var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

                if (requestMethod) { // Native full screen.
                    requestMethod.call(element);
                } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                    var wscript = new ActiveXObject("WScript.Shell");
                    if (wscript !== null) {
                        wscript.SendKeys("{F11}");
                    }
                }
            }
        }
    </script>
</body>

</html>
